<template>
  <wd-form-item
    v-if="
      typeof props.component.display == 'undefined' ||
      props.component.display === true
    "
    :component="props.component"
    :custom-field="props.customField"
  >
    <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
      <el-input
        v-model="value"
        :size="props.component.size"
        :disabled="props.component.disabled"
        :readonly="props.component.readonly"
        :clearable="props.component.allowClear ?? true"
        :maxlength="props.component.maxLength ?? null"
        :minlength="props.component.minLength ?? null"
        :placeholder="
          props.component.placeholder ?? `请输入${props.component.title}`
        "
        :formatter="props.component.formatter ?? null"
        :parser="props.component.parser ?? null"
        :type="getComponentType()"
        :show-password="props.component.formType == 'password'"
        :rows="props.component.row ?? 2"
        :autosize="{ minRows: 2, maxRows: 4 }"
        :show-word-limit="props.component.wordLimit ?? false"
      >
        <template #prepend v-if="props.component.openPrepend">
          <slot :name="`inputPrepend-${props.component.dataIndex}`" />
        </template>
        <template #append v-if="props.component.openAppend">
          <slot :name="`inputAppend-${props.component.dataIndex}`" />
        </template>
        <template #suffix v-if="props.component.openSuffix">
          <slot :name="`inputSuffix-${props.component.dataIndex}`" />
        </template>
        <template #prefix v-if="props.component.openPrefix">
          <slot :name="`inputPrefix-${props.component.dataIndex}`" />
        </template>
      </el-input>
    </slot>
  </wd-form-item>
</template>


<script setup>
import { ref, inject, onMounted, watch } from "vue";
import { get, set } from "lodash";
const props = defineProps({
  component: Object,
  customField: { type: String, default: undefined },
});

const formModel = inject("formModel");
const index = props.customField ?? props.component.dataIndex;
const value = ref(get(formModel.value, index));

watch(
  () => get(formModel.value, index),
  (vl) => (value.value = vl)
);
watch( () => value.value, v => {
  // console.log(index)
  set(formModel.value, index, v)
  index.indexOf('.') > -1 && delete formModel.value[index]
} )
//获取input 类型['text' | 'textarea' | 'password' ]
const getComponentType = () => {
  if (props.component.formType == "input") {
    return "text";
  } else if (props.component.formType == "input-password") {
    return "password";
  } else if (props.component.formType == "textarea") {
    return "textarea";
  } else {
    return "text";
  }
};
</script>